<template>
	<div>
		<div>
			<van-search v-model="value" @search="onSearch()" show-action  placeholder="商品名称">
				<template #action>
					<van-button round size="small"
						style="color: #FFFFFF; background-color: #01CBE2;width: 100%;font-weight: bold;border: 0;padding: 1rem 1rem;font-size: 15px;"
						@click="onSearch()">搜索
					</van-button>
				</template>
			</van-search>
			<div v-show="isShow" style="position:absolute;z-index: 1;width: 100%;">
				<van-cell-group inset style="height: 50rem;">
					<van-cell v-for="(item,i) in search" :key="i" :title="item.title" @click="onDetail(item.id)"
						style="margin-left: 0.8rem;" />
				</van-cell-group>
			</div>
		</div>

		<div style="width: 94%; margin: 0 3% 0 3%;">
			<div v-if="searches_list.length>0" style="margin-bottom: 0.5rem;">
				<div style="display: flex;justify-content: space-between;align-items: center;">
					<div style="font-size: 18px;margin-top: 0.5rem;">搜索历史</div>
					<div>
						<van-icon size="20" name="delete-o" v-if="historyxs" @click="clearhis"></van-icon>
					</div>
				</div>
				<div style="margin-top: 1rem;" v-if="searches_list.length>0">
					<div style="display: flex;flex-wrap: wrap;">
						<div v-for="(item,index) in searches_list" :key="index"
							style="background-color: #f3f3f3;line-height: 2rem;text-align: center;padding: 0.2rem 0.8rem;margin-right: 0.5rem;margin-bottom: 0.5rem;">
							<span @click="historysearch(item)">{{item}}</span>
							<van-icon @click="clearthissearch(index)" name="cross" color="#ccc"
								style="margin-left: 0.3rem;" />
						</div>
					</div>
				</div>
			</div>
			<div>
				<div style="font-size: 20px;color: #01CBE2;font-family:'华文琥珀';">Playground <span
						style="font-family: '微软雅黑';">热搜</span></div>
				<div
					style="border: 0.1rem solid #01CBE2;margin-top: 1rem;padding-top: 1rem;width: 60%;border-radius: 10px;margin-bottom: 2rem;">
					<div v-for="(item,i) in productItems" :key="i" @click="historysearch(item.title)"
						style="display: flex;margin: 0 0 1rem 1rem ;font-size: 18px;align-items: center;">
						<div style="margin-top: 0.2rem;color: #666;font-weight: bold;">{{item.id}}</div>
						<div style="margin-left: 1rem;">{{item.title}}</div>
					</div>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	import {
		Toast,
		Dialog
	} from "vant";
	import {
		getRankListAPI
	} from "@/api/rank.js";
	import {
		saveSearch,
		deleteSearch
	} from "@/utils/cache.js"; //引用本地存储js
	import storage from "good-storage"; //引入good-storage包
	import {
		getProductSearchAPI
	} from '@/api/product.js';
	export default {
		data() {
			return {
				value: '',
				isShow: false,
				search: [],
				searchList: [],
				isFocus: true,
				historyxs: false,
				searches_list: [],
				productItems: [],
			};
		},
		created() {
			this.initPage();
			getRankListAPI().then(result => {
				this.productItems = result.data;
			}).catch(() => {});
		},
		methods: {
			onSearch() {
				this.isShow = true;
				let params = {
					title: this.value
				};
				//2.使用封装后的接口,注意：接口有参数
				getProductSearchAPI(params).then(result => {
					// this.$toast(result.msg);
					this.search = result.data;
					this.searchList = result.data.title;
					console.log(result)
				}).catch(() => {});
				if (this.value != "") {
					//搜索框不为空
					saveSearch(this.value); // 本地存储搜索的内容
					let params = {
						majorInfo: this.value //流程类型或者流程名称
					};
					this.$emit("handleSearch", params);
				}
			},
			//输入框获取焦点
			initPage() {
				this.$emit("initSearchPage");
				//为避免重复先清空再添加
				this.searches_list = [];
				let searches = storage.get("_search_");
				this.searches_list = searches ? searches : [];
				if (this.searches_list.length > 0) {
					this.historyxs = true;
				} else {
					this.historyxs = false;
				}
			},
			//点击历史搜索把搜索的记录添加到good-storage中
			historysearch(item) {
				saveSearch(item);
				this.value = item;
				this.historyxs = false;
				this.onSearch();
			},
			clearthissearch(index) {
				this.searches_list.splice(index, 1);
				deleteSearch(index);
			},
			//清空历史记录
			clearhis() {
				Dialog.confirm({
					title: "确认全部清空吗?",
					message: "清空全部历史记录将不能撤回此次操作，确定要全部清空吗？",
				}).then(() => {
					storage.remove("_search_");
					this.searches_list = [];
					this.historyxs = false;
				}).catch(() => {
					router.push({
						name: "search"
					});
				});

			},
			onDetail(id) {
				this.$router.push({
					name: 'productDetail',
					params: {
						id
					},
				});
			}

		},

	};
</script>

<style>
</style>
